﻿
* {margin: 0; padding: 0;}

#container {
	width: 1000px;
	overflow: hidden;
	margin: 0px auto;
	background: white;
    border-radius: 0px;
}
.photobanner {
	height: 180px;
	width: 2250px;
	margin: 10px;
}
/*keyframe animations*/
/*đặt thuộc tính cho hình đâu tiên và tốc độ di chuyển của hình đó.
nó sẽ có tác động trực tiếp đến các hình tiếp theo...nó là quan trọng nhất*/
.first {
	-webkit-animation: bannermove 10s linear infinite;
	   -moz-animation: bannermove 10s linear infinite;
	    -ms-animation: bannermove 10s linear infinite;
	     -o-animation: bannermove 10s linear infinite;
	        animation: bannermove 10s linear infinite;
}
/*gắn các khóa cho sự di chuyển. từ o%-100% và sẽ lặp lại vị trí ban đầu khi tới 100%
nó sẽ làm cho các hình chuyển động theo một chuỗi. vì đã có hình đầu tiên*/
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -1230px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1230px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1230px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1230px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1230px;
 }
 
}
/*làm cho hình zoom ra khi move chuột vào*/
.photobanner img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
 
.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
 
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}